<template>
  <div @click="pathPush">
    <div class="detailItem">
      <div class="imgparent">
        <img :src="detailitem.img" alt="" style="width: 100%" />
        <div class="bottom">
          <div class="icon-play2">
            <span class="video">2020</span>
          </div>
          <div class="icon-file-text">
            <span class="comment">{{
              !detailitem.commentlen ? 1990 : detailitem.commentlen
            }}</span>
          </div>
        </div>
      </div>

      <p>{{ detailitem.name }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['detailitem'],
    methods: {
      pathPush() {
        if (this.$route.path != `/article/${this.detailitem.id}`) {
          this.$router.push(`/article/${this.detailitem.id}`)
        }
      },
    },
  }
</script>

<style lang="stylus" scoped>
  .detailItem
    p
      font-size: 12px

  .imgparent
    width: 175px
    height: 101px
    border: 1px solid #000000
    position: relative

    .bottom
      font-size: 12px
      padding: 3px 5px
      position: absolute
      bottom: 0px
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent)
      justify-content: space-between
      color: white
      left: 0
      right: 0
      display: flex
</style>